<template>
   <div class="scale-box">
    <slot></slot>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from 'vue'
const width = ref(null), //设计宽度
  height = ref(null), //设计高度
  scale = ref(null)

const props = defineProps({
  width: {
    type: String,
    default: '1920px',
  },
  height: {
    type: String,
    default: '1080px',
  },
})

const init = () => {
  setScale()
  window.addEventListener('resize', setScale)
}

const setScale = () => {
  let ww = window.innerWidth / props.width
  let wh = window.innerHeight / props.height
  scale.value = ww < wh ? ww : wh
}

init()
</script>

<style scoped>
.scale-box {
  width: v-bind('props.width');
  height: v-bind('props.height');
  transform: scale(v-bind(scale)) translate(-50%, -50%);
  transform-origin: 0 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transition: 0.3s;
  
}
</style>